import { defineComponent, PropType } from 'vue'

import SongListItem from './SongItem'

import styles from './style.module.scss'
import { ISonglist } from 'apis/types/business'

export default defineComponent({
  name: '',
  props: {
    data: {
      type: Array as PropType<ISonglist[]>,
      required: true,
    },
  },
  setup(props) {
    console.log('props', props.data)
    return () => {
      return (
        <>
          <div class={styles.root}>
            {props.data.map(({ id, name, playCount, picUrl, coverImgUrl }, index) => (
              <SongListItem key={id} id={id} name={name} playCount={playCount} picUrl={picUrl || coverImgUrl} />
            ))}
          </div>
        </>
      )
    }
  },
})
